<template lang="">
  <el-container>
    <el-card class="child-box box-card" v-show="myselelfFlag">
      <el-button type="text" style="color:gray" @click="tuichu()">退出</el-button>
      <br>
      <el-button style="margin: 0;color:gray" type="text" @click="personalCenter">个人中心</el-button>
    </el-card>
    <el-header style="height:60px;line-height:60px;position: fixed;z-index: 1000;width: 100%;">
      <el-row>
        <el-col :span="4"><div class="grid-content">
          <el-image
            style="height:100%;float:left;"
            src="favicon.ico"
            fit="contain"></el-image>
            <span style="float:left;margin-left:20px;font-size: 18px;">随时随地，想拍就拍！</span>
        </div></el-col>
        <el-col :span="12"><div class="grid-content"></div></el-col>
        <el-col :span="8"><div class="grid-content parent-box">
          <span v-show="notLoggedIn" style="float:right;margin-left:20px;font-size: 18px;cursor:pointer" @click="toLogin">登录</span>
          <el-avatar v-show="signedIn" :src="'http://101.43.223.224:8765/image/getImageById?id='+loginUser.imageId"
          style="float:right;margin-left:20px;margin-top:10px; cursor:pointer;">
          </el-avatar>
          <span v-show="signedIn" style="float:right;margin-left:20px;font-size: 18px;">欢迎回来，
            <b v-on:mouseover="changeMyselfFlag()">{{loginUser.userName}} </b>
          </span>
          <span style="font-size: 18px;float:right;color:#F1F2E5">
            <i class="el-icon-phone"></i>
            客服电话：400-886-0000</span>
        </div></el-col>
      </el-row>
    </el-header>
    <el-header style="height:50px;line-height:50px;background:white;position:fixed;top:60px;z-index: 1000;width: 100%;">
      <el-row>
        <el-col :span="8"><div class="grid-content1">
          <el-menu router class="el-menu-demo" mode="horizontal" style="background: none;color:#414A56;">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/announcement">公告</el-menu-item>
            <el-menu-item index="/biddingHall">竞价大厅</el-menu-item>
            <!-- <el-menu-item index="/announcement">成交案例</el-menu-item> -->
          </el-menu>
        </div></el-col>
        <el-col :span="8"><div class="grid-content1">
          <div style="width: 700px;height:40px;border-radius: 25px;border: 1px solid #d7000f;margin-top: 4px;background-color: white;margin-left: -35px;">
            <div style="width: 16px;height: 40px;float: left;position: relative;top: -2px;right: -10px;">
              <img src="../assets/search.png">
            </div>
            <div style="float:left;margin-left: 18px;overflow: hidden;position: absolute;">
              <el-input style="border: none;position: relative;
              top: 0;
              left:20px;
              border: none;
              width: 600px;
          " placeholder="请输入内容" v-model="search" @keydown.enter.native="cSearch" @submit.native.prevent></el-input>
            </div>
            <div style="float:right;margin-right: 3px;">
              <div style="width:60px;height: 35px;background-color: #d7000f;margin-top: 2.4px;border-radius: 20px;" @click="cSearch">
                <img src="../assets/sousuo.png" alt="" style="position: relative;top: -5px;" >
              </div>
            </div>
          </div>
        </div></el-col>
        <el-col :span="8"><div class="grid-content1">
          <el-menu router class="el-menu-demo" mode="horizontal" style="background: none;color:#414A56;float:right;">
            <el-menu-item index="/auctionView" v-if="loginUser.id!==undefined">我的拍卖</el-menu-item>
            <el-menu-item index="/releaseGoodsView">上传商品</el-menu-item>
            <el-menu-item index="/myBidding">我的竞价</el-menu-item>
          </el-menu>
        </div></el-col>
      </el-row>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>

    <el-footer>
       <!-- 客服弹窗 -->
       <div class="Services" v-if="ServicesWindows" >
        <!-- <div class="block"><el-avatar :size="20" :src="'http://101.43.223.224:8765/image/getImageById?id='+loginUser.imageId"></el-avatar>
        </div> -->
        <el-button type="danger" @click="clickService" style="background: #D7000F" >联系客服</el-button>
      </div>

      <!-- 联系客服 -->
      <div class="ServicesDiv" v-else >

      </div>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  name: 'HomeView',
  data () {
    return {
      userPhone: window.sessionStorage.getItem('userPhone'), // 取userPhone
      signedIn: false, // 登录状态
      notLoggedIn: false, // 未登录状态
      token: window.sessionStorage.getItem('token'), // 取token
      loginUser: {}, // 当前登录用户
      myselelfFlag: false,
      ServicesWindows: true,
      search: '' // 搜索
    }
  },
  async mounted () {
    this.select()
    this.getLoginUser()
    this.aaa()
  },
  methods: {
    clickService () {
      // this.ServicesWindows = false
      // this.$router.push({})
      this.$router.push('/Chat')
    },
    // 打开客服弹窗

    alert () {
      return 1
    },
    cSearch () {
      this.$router.push({
        path: '/searchView',
        query: { search: this.search }
      })
      const originalPush = this.$router.push
      this.$router.push = function push (location) {
        return originalPush.call(this, location).catch(err => err)
      }
    },
    select () {
      console.log(this.token)
      this.$axios.get('/clientuser/selectToken', {
        params: {
          token: this.token
        }
      }).then(res => {
        if (res.data.flag) {
          console.log('11')
        } else {
          window.sessionStorage.setItem('token', '')
          this.myMessage('waring', '重新登陆！')
          this.notLoggedIn = true
          this.signedIn = false
        }
      })
    },
    personalCenter () { // 跳转个人中心页面
      this.$router.push({
        path: '/personalCenter',
        query: { userPhone: this.loginUser.userPhone }
      })
    },
    toLogin () { // 跳转至登录页面
      this.$router.push('/login')
    },
    aaa () { // 判断是登录状态还是未登录状态
      if (this.token) {
        this.signedIn = true
      } else {
        this.notLoggedIn = true
      }
    },
    // 判断是否登录
    // tuichu () {
    //   if (this.token) {
    //     this.myMessage('success', '您已登录')
    //   } else {
    //     this.token = window.sessionStorage.setItem('token', '')
    //     this.$router.push('/')
    //   }
    // },
    tuichu () { // 退出登录
      const token = window.sessionStorage.getItem('token')
      window.sessionStorage.setItem('token', '')
      sessionStorage.clear()
      this.$axios.get('/clientuser/Deltoken', {
        params: {
          token: token
        }
      }).then(res => {
        if (res.data.flag) {
          console.log('token成功')
        }
      })
      this.$router.push('/')
      this.$router.go(0)
    },
    async getLoginUser () {
      this.$axios.post('/clientuser/getLoginUser', this.token).then(res => {
        if (res.data.flag) {
          this.loginUser = res.data.obj
          console.log(this.loginUser)
        } else {
          // this.myMessage('当前用户暂未参与交易', 'error')
          console.log('当前用户暂未参与交易')
        }
      })
      console.log('已获取登录用户信息')
    },
    // 提示信息
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    },
    // 更改个人功能的状态
    changeMyselfFlag () {
      this.myselelfFlag = !this.myselelfFlag
    }
  }
}
</script>
<style lang="less" scoped>
  .ServicesDiv{
    width: 500px;
    height: 500px;
    position:fixed;
    top: 0px;
    z-index: 999;
    right: 0px;
    /* background-color: #909399; */
  }
  .Services{
    width: 100px;
    height: 40px;
    color: #B80A17;
    position:fixed;
    z-index: 999;
    right: 0px;
    /* background-color: #909399; */
  }
  /deep/.el-menu.el-menu--horizontal {
    border-bottom: none;
  }
  /deep/[data-v-9ea40744] .grid-content1 .el-input__inner {
    width: 600px;
    border: none;
    background-color: white;
    font-size: 16px;
    height: 36px;
    position: relative;
    top: -5px;
    padding: 0px;
  }
  .el-header{
    background: linear-gradient(to right,#D7000F,#B80A17);
    color: #F1F2E5;
    text-align: center;
    font-size: 16px;
  }
  .el-aside {
    color: #333;
    text-align: center;
  }
  .el-container {
    height:100%
  }
/* 页面背景色 */
  .el-main {
    height: 100%;
    margin-top: 120px;
    padding-top:0 !important;
    background-color: white;
    color: #333;
    padding: 0;
  }
  .grid-content{
    height:60px;
  }
  .grid-content1{
    height:50px;
  }
  .el-menu-item,.el-menu-deom{
    font-size:16px;
    line-height: 50px;
    height:50px;
  }
  /* 设置选鼠标指针浮动在一级菜单的设置 */
  .el-menu-item:hover{
    color:#D7000F !important;
    border-bottom: 2px solid #D7000F !important;
  }
  /*设置当前被选中的一级菜单 */
  .el-menu-item.is-active {
    color: #D7000F !important;
    border-bottom: 2px solid #D7000F !important;
  }
  /* 边框颜色 */
  .el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: 2px solid #F1F2E5;
  }
  /* /deep/.el-input__inner{
    width: 600px;
    border: none;
    background-color:#F1F2E5;
    font-size: 16px;
    height: 36px;
    position: relative;
    top: -5px;
    padding:0px;
  } */
  /* 退出按钮子级 */
  .child-box{
    padding:0;
    text-align: center;
    width:120px;
    height:120px;
    position: absolute;
    top: 60px;
    right:60px;
    z-index: 19999;
  }
  .el-card__body{
    padding:0 !important
  }
</style>
